<template>
  <div class="test-demo-page">
    <el-card>
      <template #header>
        <div class="demo-header">
          <el-icon class="demo-icon"><Warning /></el-icon>
          <span class="title">功能测试演示页面</span>
        </div>
      </template>

      <el-alert
        title="这是一个快速功能测试页面"
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      >
        <template #default>
          <p>点击下面的按钮快速跳转到各个功能模块进行测试</p>
        </template>
      </el-alert>

      <!-- 基础资料测试 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><Files /></el-icon>
            <span>基础资料模块（10个功能）</span>
          </div>
        </template>
        
        <el-row :gutter="15">
          <el-col :span="6" v-for="item in basedataPages" :key="item.path">
            <el-button class="test-button" @click="$router.push(item.path)">
              <el-icon><component :is="item.icon" /></el-icon>
              {{ item.name }}
            </el-button>
          </el-col>
        </el-row>

        <el-divider />
        <div class="test-tips">
          <h4>🧪 测试要点：</h4>
          <ul>
            <li>✅ 测试<strong>货币管理</strong>：代码自动转大写、本位币汇率联动</li>
            <li>✅ 测试<strong>计量单位</strong>：导入导出、批量操作</li>
            <li>✅ 所有页面的增删改查功能</li>
          </ul>
        </div>
      </el-card>

      <!-- 低代码平台测试 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><MagicStick /></el-icon>
            <span>低代码平台（9个功能）</span>
            <el-tag type="danger" size="small">核心功能</el-tag>
          </div>
        </template>
        
        <el-row :gutter="15">
          <el-col :span="6" v-for="item in lowcodePages" :key="item.path">
            <el-button 
              class="test-button" 
              :type="item.highlight ? 'primary' : ''"
              @click="$router.push(item.path)"
            >
              <el-icon><component :is="item.icon" /></el-icon>
              {{ item.name }}
              <el-tag v-if="item.badge" type="danger" size="small" style="margin-left: 5px">
                {{ item.badge }}
              </el-tag>
            </el-button>
          </el-col>
        </el-row>

        <el-divider />
        <div class="test-tips">
          <h4>🔥 重点测试：</h4>
          <ul>
            <li>⭐⭐⭐ <strong>API接口设计器</strong>：SQL智能提示（输入SEL试试！）</li>
            <li>⭐⭐⭐ <strong>AI助手</strong>：自然语言生成应用</li>
            <li>⭐⭐ <strong>表单设计器</strong>：拖拽组件+AI生成</li>
            <li>⭐⭐ <strong>页面设计器</strong>：拖拽布局+代码生成</li>
            <li>⭐⭐ <strong>数据模型设计器</strong>：可视化建表+SQL生成</li>
          </ul>
        </div>
      </el-card>

      <!-- 快速测试指南 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><DataAnalysis /></el-icon>
            <span>快速测试指南（5分钟）</span>
          </div>
        </template>

        <el-timeline>
          <el-timeline-item timestamp="1分钟" placement="top">
            <el-card>
              <h4>测试基础资料智能验证</h4>
              <p>打开"货币管理" → 新增货币 → 输入小写代码"usd" → 验证自动转大写</p>
              <el-button size="small" type="primary" @click="$router.push('/basedata/currencies')">
                开始测试
              </el-button>
            </el-card>
          </el-timeline-item>

          <el-timeline-item timestamp="2分钟" placement="top">
            <el-card>
              <h4>测试SQL智能提示 ⭐⭐⭐</h4>
              <p>打开"API设计器" → 新建接口 → 在SQL编辑器输入"SEL" → 验证智能提示</p>
              <el-button size="small" type="primary" @click="$router.push('/lowcode/api-designer')">
                开始测试
              </el-button>
            </el-card>
          </el-timeline-item>

          <el-timeline-item timestamp="2分钟" placement="top">
            <el-card>
              <h4>测试AI生成功能</h4>
              <p>打开"AI助手" → 输入"创建员工管理页面" → 验证AI响应</p>
              <el-button size="small" type="primary" @click="$router.push('/lowcode/ai-assistant')">
                开始测试
              </el-button>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 功能统计 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><PieChart /></el-icon>
            <span>功能统计</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-statistic title="总页面数" :value="29" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="代码行数" :value="10000" suffix="+" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="完成度" :value="97" suffix="%" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="AI功能点" :value="6" />
          </el-col>
        </el-row>

        <el-divider />

        <el-descriptions title="系统信息" :column="2" border>
          <el-descriptions-item label="技术栈">
            Vue 3 + Element Plus + AI
          </el-descriptions-item>
          <el-descriptions-item label="核心创新">
            SQL智能提示 + AI驱动
          </el-descriptions-item>
          <el-descriptions-item label="基础资料">
            10个模块 (100%完成)
          </el-descriptions-item>
          <el-descriptions-item label="低代码平台">
            9个功能 (95%完成)
          </el-descriptions-item>
          <el-descriptions-item label="效率提升">
            10-100倍
          </el-descriptions-item>
          <el-descriptions-item label="推荐指数">
            ⭐⭐⭐⭐⭐
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { Warning, Files, MagicStick, DataAnalysis, PieChart } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 基础资料页面
const basedataPages = [
  { name: '计量单位', path: '/basedata/units', icon: 'Scale' },
  { name: '货币管理', path: '/basedata/currencies', icon: 'Money' },
  { name: '地区管理', path: '/basedata/regions', icon: 'Location' },
  { name: '结算方式', path: '/basedata/payment-methods', icon: 'CreditCard' },
  { name: '税率管理', path: '/basedata/tax-rates', icon: 'DocumentChecked' },
  { name: '品牌管理', path: '/basedata/brands', icon: 'PriceTag' },
  { name: '价格级别', path: '/basedata/price-levels', icon: 'Star' },
  { name: '发票类型', path: '/basedata/invoice-types', icon: 'Tickets' },
  { name: '职位管理', path: '/basedata/positions', icon: 'Briefcase' },
  { name: '费用类型', path: '/basedata/expense-types', icon: 'Coin' }
]

// 低代码平台页面
const lowcodePages = [
  { name: 'AI助手', path: '/lowcode/ai-assistant', icon: 'MagicStick', highlight: true, badge: 'HOT' },
  { name: 'API设计器', path: '/lowcode/api-designer', icon: 'Connection', highlight: true, badge: 'NEW' },
  { name: '表单设计器', path: '/lowcode/form-designer', icon: 'Edit', highlight: true },
  { name: '页面设计器', path: '/lowcode/page-designer', icon: 'Document', highlight: true },
  { name: '数据模型', path: '/lowcode/model-designer', icon: 'Coin', highlight: true },
  { name: '应用管理', path: '/lowcode/applications', icon: 'Grid' },
  { name: '组件库', path: '/lowcode/component-library', icon: 'Box' },
  { name: '模板中心', path: '/lowcode/templates', icon: 'FolderOpened' },
  { name: '流程设计器', path: '/lowcode/flow-designer', icon: 'Share' }
]
</script>

<style scoped>
.test-demo-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.demo-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-icon {
  font-size: 24px;
  color: #e6a23c;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.section-card {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

.test-button {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.test-tips {
  background: #f0f9ff;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.test-tips h4 {
  margin: 0 0 10px 0;
  color: #409eff;
}

.test-tips ul {
  margin: 0;
  padding-left: 20px;
}

.test-tips li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.el-timeline {
  padding-left: 10px;
}
</style>

